<!--
 * @Descripttion: 合作入驻
 * @Author: wang pingqi
 * @Date: 2022-04-15 09:55:50
 * @LastEditors: WangYuan
 * @LastEditTime: 2022-08-25 09:55:05
-->
<template>
  <div class="app-container">
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="username">
        <el-input
          v-model="list.filter.username"
          placeholder="合作人姓名"
          clearable
        />
      </el-form-item>
      <el-form-item prop="type">
        <!-- <KiSelect
          v-model="list.filter.type"
          :options="dict.manage_type"
          placeholder="经营类目"
        /> -->
        <el-select
          v-model="list.filter.type"
          filterable
          clearable
          placeholder="经营类目"
        >
          <el-option
            v-for="item in dict.manage_type"
            :key="item.dataValue"
            :label="item.dataName"
            :value="item.dataValue"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="processStatus">
        <KiSelect
          v-model="list.filter.processStatus"
          :options="dict.contact_processStatus"
          placeholder="是否处理"
        />
      </el-form-item>
      <el-form-item prop="endTime" label="提交时间：">
        <TimeRangePicker
          :start.sync="list.filter.startTime"
          :end.sync="list.filter.endTime"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="reset"> 重置 </el-button>
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <div></div>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column align="center" type="index" />
      <el-table-column label="合作人姓名" align="center" prop="username" />
      <el-table-column label="联系方式" align="center" prop="phone" />
      <el-table-column label="经营类目" align="center" prop="type" />
      <el-table-column label="提交时间" align="center" prop="createTime" />
      <el-table-column label="状态" align="center">
        <template slot-scope="{ row }">
          <!-- {{row.processStatus}} -->
          <el-tag :type="disposeStatus[row.processStatus]">
            {{
              row.processStatus | $value2label(dict["contact_processStatus"])
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding">
        <template slot-scope="{ row }">
          <auth-button @click="r(row, 'cache')" name="查看" />
          <auth-button
            v-if="row.processStatus == '0'"
            @click="
              () => {
                form.data.__isResult = true;
                u(row, 'cache');
              }
            "
            name="处理"
          />
        </template>
      </el-table-column>
    </el-table>

    <KiFormDialog
      v-if="form.show"
      :show.sync="form.show"
      :title="form.data.__isResult ? '处理' : formTitle"
      v-model="form.data"
      :submit="submitForm"
      :readonly="form.status === 'r'"
      ref="formRef"
      :loading="form.loading"
    >
      <template #el-form>
        <div class="user-weChat">
          <span>用户微信昵称：{{ form.data.userNickName }}</span>
          <span>微信绑定电话：{{ form.data.userPhone }}</span>
        </div>
        <el-form-item label="合作人姓名" prop="username">
          <el-input
            v-model="form.data.username"
            clearable
            :disabled="form.data.__isResult"
          />
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input
            v-model="form.data.phone"
            clearable
            :disabled="form.data.__isResult"
          />
        </el-form-item>
        <el-form-item label="合作州市" prop="address">
          <!-- <RegionSelect v-model="form.data.areaCode" :level="2" /> -->
          <el-input
            v-model="form.data.address"
            clearable
            :disabled="form.data.__isResult"
          />
        </el-form-item>
        <el-form-item label="经营类目" prop="type">
          <el-input
            v-model="form.data.type"
            clearable
            :disabled="form.data.__isResult"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="form.data.remark"
            type="textarea"
            :autosize="{ minRows: 3 }"
            clearable
            :disabled="form.data.__isResult"
          />
        </el-form-item>
        <el-form-item label="处理备注" prop="processRemark" verify>
          <el-input
            v-model="form.data.processRemark"
            type="textarea"
            :autosize="{ minRows: 3 }"
            maxlength="500"
            show-word-limit
            clearable
          />
        </el-form-item>
        <ul class="ml-60px">
          <li>这里的处理备注仅作为后台记录使用，用户不会在小程序端看见</li>
          <li>若想和用户联系，请使用用户给出的联系方式</li>
          <li>输入处理备注后，该条数据会被视作已处理</li>
        </ul>
        <el-form-item
          v-if="form.status === 'r'"
          label="处理时间"
          prop="processTime"
        >
          <el-input v-model="form.data.processTime" clearable />
        </el-form-item>
      </template>
    </KiFormDialog>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import pageMixin from "@/utils/pageMixin";
import useAdmateAdapter from "@/utils/useAdmateAdapter";

export default {
  mixins: [pageMixin],
  created() {
    if (this.$route.query.status) {
      setTimeout(() => {
        this.list.filter.processStatus = this.$route.query.status;
      }, 300);
    }
  },
  setup: () =>
    useAdmateAdapter({
      urlPrefix: "one-travel-api/cooperation",
      axiosConfig: {
        u: {
          url: "process",
        },
      },
      list: {
        filter: {
          username: "",
          type: "",
          startTime: "",
          endTime: "",
        },
      },
      form: {
        data: {
          __isResult: false,
        },
      },
    }),
  data() {
    return {
      disposeStatus: ["", "success"],
    };
  },
  methods: {
    // u(){
    //   console.log('u');
    // }
  },
  // created () {
  //   if (this.$route.query.status) {
  //     setTimeout(() => {
  //       this.list.filter.status = '1'
  //     }, 300)
  //   }
  // },
  // methods: {
  //   submit () {
  //     this.form.data = {
  //       id: this.form.data.id,
  //       replyContent: this.form.data.replyContent
  //     }
  //     return this.submitForm()
  //   }
  // }
};
</script>

<style scoped lang="scss">
.user-weChat {
  border-radius: 2px;
  margin-bottom: 18px;
  padding: 18px;
  background-color: #f4f4f5;
  > span {
    color: #409eff;
    margin-right: 48px;
  }
}
</style>
